<template>
    <div style="height: 100%;background: #f5f5f5;">
        <div class="avatar_con" @click="changeAvatar">
            <div class="avatar_con_r">
                <i class="icon iconfont icon-right icon_right"></i>
                <div class="avatar_con_img"><img :src="userUrl"></div>
            </div>
            头像
        </div>
        <div class="user_info_list">
            <ul>
                <li>芸券号<span class="info_list_r">{{userInfo.usrId}}  </span></li>
                <li>
                    <a @click="$router.push({path: '/changeUserInfo/name'})">
                    <span class="info_list_r">
                        <i class="icon iconfont icon-right icon_right"></i>
                        {{userInfo.usrName}}
                    </span>
                    昵称
                    </a>
                </li>
                <li>
                    <a @click="$router.push({path: '/changeUserInfo/sex'})">
                        <span class="info_list_r">
                            <i class="icon iconfont icon-right icon_right"></i>
                            {{userInfo.usrSex | userSex}}
                        </span>
                        性别
                    </a>
                </li>
                <li>
                    <a @click="$router.push({path: '/changeUserInfo/code'})">
                        <span class="info_list_r">
                            <i class="icon iconfont icon-right icon_right"></i>
                            <i class="icon iconfont icon-erweima icon_code1"></i>
                        </span>
                        账户码
                    </a>
                </li>
                <li>
                    <a @click="$router.push({path: '/changeUserInfo/position'})">
                        <span class="info_list_r">
                            <i class="icon iconfont icon-right icon_right"></i>
                            {{userInfo.location}}
                        </span>
                        所在地
                    </a>
                </li>
                <li style="margin-top: 10px">
                    <a @click="usrAccBindAccount(usrAcc)">
                        <span class="info_list_r">
                            <i class="icon iconfont icon-right icon_right" v-if="!usrAcc"></i>
                            {{usrAcc? usrAcc :"商户店员、店长未绑定" }}
                        </span>
                        账号绑定
                    </a>
                </li>
            </ul>
        </div>
        <!--<button class="exit_btn">退出当前账号</button>-->
    </div>
</template>
<script>
    import getData from '../../service/getData'
    import * as types from '../../vuex/types.js'
    import { mapState } from 'vuex'
    import { Toast,Indicator} from 'mint-ui';
    import getDate4 from '../../service/getData4';
    import {Storage} from 'src/utils/storage.js'
    import Common from '../../utils/common'

    export default {
        data(){
            return{
                myImg:'',
                usrAcc:''
            }
        },
        name:"userInfo",
        created:async function() {
            let result = await getDate4.getUsrInfo({usrId: this.userInfo.usrId});
            if(result.respCode === "00"){
                if(result.content.usr.usrAcc && result.content.usr.usrStat === "0"){
                    this.usrAcc = result.content.usr.usrAcc
                }
            }
        },
        computed:{

            ...mapState({
                userInfo:state => state.user.userInfo,
                userUrl:state => state.user.userUrl,
            })
        },
        methods:{
            usrAccBindAccount(usrAcc){
                if(!usrAcc){
                    this.$router.push({name:"bindAccount"})
                }
            },
            changeAvatar(){
                let me =this;
                wx.chooseImage({
                    count: 1, // 默认9
                    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                    success: function (res) {
                        var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                        me.myImg = res.localIds.toString();
                        me.uploadImg(localIds)
                    }
                });
            },
            uploadImg:function(imgIds){
                let me = this;
                wx.uploadImage({
                    localId: imgIds.toString(), // 需要上传的图片的本地ID，由chooseImage接口获得
                    isShowProgressTips: 1, // 默认为1，显示进度提示
                    success: function (res) {
                        me.upToService(res.serverId);
                    },
                    error:function(res){

                    }
                });
            },
            upToService(id){
                let me =this;
                getData.upAvatar({
                    method:"post",
                    data:{
                        "mediaId": id,
                        "usrId": me.userInfo.usrId
                    }

                }).then(rep => {
                    Storage.set("userUrl",me.myImg,true);
                    me.$store.commit("change_userUrl",Storage.get("userUrl",true))
                    Toast({
                        message: '修改成功',
                        duration: 800
                    });
                });
            }
        }
    }
</script>
<style lang="scss" scoped>
    .user_info_list{
        background: none;
        li{
            background: #fff;
        }
    }
</style>
